import React, { useEffect, useState } from 'react';
import {
  Card,
  Row,
  Col,
  Spin,
  Modal,
  Tooltip,
  message,
  Pagination,
} from 'antd';
import { DeleteOutlined, FileOutlined } from '@ant-design/icons';
import { history, request } from 'umi';
import styles from './index.less';

const ReportCard = (props: any) => {
  const [loading, setLoading] = useState(false);
  const [reportList, setReportList] = useState([]);
  const [pageParams, setPageParams] = useState({ page: 1, pageSize: 10 });
  const [total, setTotal] = useState(0);

  useEffect(() => {
    handleGetReportList();
  }, [pageParams]);

  // useEffect(() => { // 解决异步问题
  //     if (reportList) {
  //        setReportList(reportList)
  //        console.log(reportList)
  //     }
  // },[reportList])

  const handleGetReportList = () => {
    setLoading(true);
    request('/api/report/list', { params: pageParams }).then((res) => {
      console.log(res);
      if (res.err_code === 0) {
        // console.log(res.data.reportList)
        setReportList(res.data.reportList);
        setTotal(res.data.total);
      }
      setLoading(false);
    });
  };
  // 查看
  const handleWatch = (id: number) => {
    // alert('查看' + id)
    history.replace(`/report/write/${id}`);
    console.log(id);
  };
  // 删除
  const handleDel = (id: number) => {
    Modal.confirm({
      title: '温馨提示',
      content: '确定删除该日报？',
      onOk() {
        handleRequestDel(id);
      },
    });
  };
  const handleRequestDel = (id: number) => {
    request('/api/report/delete', { params: { id: id } }).then((res) => {
      if (res.err_code === 0) {
        message.success(res.msg);
        handlePageChange(1);
      } else {
        message.warning(res.msg);
      }
    });
  };
  // 分页
  const handlePageChange = (page: number) => {
    setPageParams({
      ...pageParams,
      page: page,
    });
  };
  // 渲染卡片
  const colSpan = { span: 12 };
  const renderCards = () =>
    reportList.map((item: any) => {
      return (
        <Col key={item.date} {...colSpan}>
          <Card
            className={styles.reportCard}
            title={item.date}
            extra={
              <div>
                <Tooltip placement={'top'} title={'查看'}>
                  <FileOutlined
                    className={`${styles.icon} ${styles.blue}`}
                    onClick={() => handleWatch(item.id)}
                  ></FileOutlined>
                </Tooltip>
                <Tooltip placement={'top'} title={'删除'}>
                  <DeleteOutlined
                    className={`${styles.icon} ${styles.red}`}
                    onClick={() => handleDel(item.id)}
                  ></DeleteOutlined>
                </Tooltip>
              </div>
            }
          >
            <p className={styles.title}>{item.title}</p>
            <p className={styles.receiver}>{item.receiver}</p>
          </Card>
        </Col>
      );
    });
  return (
    <div className={styles.renderCard}>
      {total > 0 ? (
        <Spin spinning={loading}>
          <Row gutter={20}>{renderCards()}</Row>
          {total > 0 && (
            <Pagination
              size={'small'}
              current={pageParams.page}
              total={total}
              onChange={handlePageChange}
            />
          )}
        </Spin>
      ) : (
        <div className={styles.empty}>暂无日报</div>
      )}
    </div>
  );
};

export default ReportCard;

// 笔记
// 因为usestate 是异步的，如果要改成同步的，可用两种方式，一是箭头函数，二是再写一个useEffect，监听需要同步的值
// 数组map的时候，其子元素需要return(),否则无法显示
